<template>
  <view class="viewpiont" :style="{ paddingTop: safeAreaInsets!.top + 'px'}">
    <view class="center">
      <h2 class="title">
        <text @tap="back" class="back iconfont icon-cuowu"></text>安心家医-智慧工作站
      </h2>
      <view class="contain">
        <!-- logo -->
        <view class="image">
          <image src="../../static/images/doctor-logo.jpg" mode="scaleToFill" />
        </view>
        <view class="form_contain">
          <!-- 输入框 -->
          <uni-forms :rules="rules" ref="formRef" :model="form">
            <view class="form">
              <!-- 邮箱 -->
              <uni-forms-item name="account">
                <view class="form-item">
                  <view class="T">
                    <text class="iconfont icon-zhanghaozhongxinzhanghaoguanli"></text
                  ></view>
                  <view class="item-input">
                    <input
                      placeholder="请输入账号"
                      v-model="form.account"
                      placeholder-class="input-placeholder"
                    />
                  </view>
                </view>
              </uni-forms-item>
              <uni-forms-item name="password">
                <view class="form-item">
                  <view class="T"> <text class="iconfont icon-mima"></text></view>
                  <view class="item-input">
                    <input
                      v-model="form.password"
                      :password="true"
                      placeholder="请输入密码"
                      placeholder-class="input-placeholder"
                    />
                  </view>
                </view>
              </uni-forms-item>
              <!-- 登录按钮 -->
              <view class="login_button" @tap="Login">登录</view>
            </view>
          </uni-forms>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { login } from '@/services/login'
import { useMemberStore } from '@/stores/index'
const { safeAreaInsets } = uni.getSystemInfoSync()
const MemberStore = useMemberStore()
const back = () => {
  uni.navigateTo({ url: '/pages/index/index' })
}
const form = ref({
  account: '123456',
  password: '123459',
})
const formRef = ref<UniHelper.UniFormsInstance>()
//校验规则
const rules: UniHelper.UniFormsRules = {
  account: {
    rules: [{ required: true, errorMessage: '请输入账号' }],
  },
  password: {
    rules: [{ required: true, errorMessage: '请输入密码' }],
  },
}
//点击登录按钮
const Login = async () => {
  try {
    await formRef.value?.validate?.()
    const res = await login(form.value)

    //将数据存到本地
    MemberStore.setProfile(res.data)
    console.log(res.data)

    if (res.code == 200) {
      uni.showToast({ icon: 'none', title: '登陆成功' })
      uni.navigateTo({ url: '/pages/index/index' })
    } else if (res.code == 101) {
      uni.showToast({ icon: 'none', title: '账号或密码错误' })
    }
  } catch (error) {}
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewpiont {
  width: 100%;
  height: 100%;
  background: url('https://bpic.51yuansu.com/backgd/cover/00/56/51/5cb1879094ee1.jpg?x-oss-process=image/resize,h_300,m_lfit/sharpen,100')
    no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .center {
    height: 270rpx;
    width: 400rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 1rpx 2rpx 9rpx 2rpx rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
    .back {
      color: #23ceee;
      float: left;
      margin-left: 10rpx;
      font-size: 16rpx;
    }
    .title {
      height: 50rpx;
      text-align: center;
      line-height: 50rpx;
      font-size: 16rpx;
      font-weight: bold;
    }
    .contain {
      height: 220rpx;
      display: flex;
      .image {
        height: 100%;
        width: 150rpx;
      }
      .form_contain {
        height: 100%;
        width: 250rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .form {
          width: 200rpx;
          height: 150rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          .login_button {
            background-color: #23ceee;
            height: 30rpx;
            width: 100rpx;
            color: #fff;
            border-radius: 70rpx;
            text-align: center;
            line-height: 30rpx;
            font-weight: bold;
            font-size: 16rpx;
            box-shadow: 1rpx 1rpx 4rpx 1rpx rgba(0, 0, 0, 0.3);
          }
          .form-item {
            display: flex;
            border-bottom: 1rpx solid #ccc;
            height: 25rpx;
            .T {
              height: 25rpx;

              text-align: center;
              .icon-zhanghaozhongxinzhanghaoguanli,
              .icon-mima {
                line-height: 25rpx;
                font-size: 20rpx;
                color: #6cb4da;
                font-weight: bold;
              }
            }
            .item-input {
              height: 100%;
              width: 100%;
              color: #afa9a9;
              margin-left: 5rpx;
              input {
                height: 100%;
                font-size: 16rpx;
                .input-placeholder {
                  color: #ccc;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>